<template>
	<div class="top-bar-box" :style="{'padding-top':statusBarHeight+'px'}">
		<div class="search" :style="searchStyle">
			<uni-easyinput class="easyinput" :trim="true" :inputBorder="false" suffixIcon="search" v-model="form.searchVal" placeholder="请输入关键词" confirmType="search"
				@iconClick="search">
			   </uni-easyinput>
		</div>
		<slot></slot>
	</div>
</template>
<script>
	export default{
		options:{
			styleIsolation: 'shared'
		}
	}
</script>
<script setup>
	import {onMounted,reactive,ref,getCurrentInstance } from 'vue';
	const emit = defineEmits(['update:modelValue','search']);
	const instance = getCurrentInstance();
	const form = reactive({
		searchVal:'',
	})
	const topBarBoxRef = ref(null);
	const app = getApp();
	const {statusBarHeight,menuButtonRect} = app.globalData;
	const searchStyle = {
		width:`calc(${menuButtonRect.left}px - 50rpx)`,
		height:menuButtonRect.height + 'px',
		'margin-left':`calc(100% - ${menuButtonRect.right}px)`,
	}
	
	const tabClick = (index) => {
		tabIndex.value = index;
	}
	
	const search = ()=>{
		emit('search',form.searchVal);
	}
	
	//获取节点信息相关
	// const query = uni.createSelectorQuery().in(instance.proxy);
	// query.select('.top-bar-box').fields({computedStyle:['padding']},function(res){
	// 	console.log(res)
	// }).exec();

	onMounted(() => {
	})
</script>

<style lang="scss" scoped>
	.top-bar-box{
		padding-bottom: 40rpx;
		background:linear-gradient(180deg,#00d1d1,#c1fffa,#fefefe);
		.search{
			padding-bottom: 20rpx;
		    ::v-deep .uni-easyinput{
				.uni-easyinput__content{
					border-radius: 100px !important;
				}
			}
		}
	}
</style>